<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易计算器</title>
		<link rel="stylesheet" type="text/css" href="test01.css"/>
	</head>
	<body>
		<div class="calculator ">
			<img src="logo.gif"/>
			<img src="shop.gif" class="01">
			<br />
			<label class="logo">淘宝计算器</label>
			<br />
			<label>第一个数</label>
			<br />
			<input type="text" name="" id="txt1" value="" />
			<br />
			
			<label>第二个数</label>
			<br />
			<input type="text" name="" id="txt2" value="" />
			<br />
			<select name="sign">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<br />
			<label>结果</label>
			<input type="button" name="" id="" value="=" onclick="cal();" />
			
			<input type="text" name="" id="result" value="" />
		</div>
			
		<!--引入js-->
		<script type="text/javascript">
			
			function cal(){
				//获取到两个数一个一个获取，选择运算符(获取运算符对象 选择运算符)   输出结果
				var num1=document.getElementById("txt1").value;
//				alert(num1.value);
				var num2=document.getElementById("txt2").value;
				var op= document.getElementsByName("sign")[0];
				var temp;
				switch (op.value){
					case "+":temp=Number(num1)+Number(num2);break;
					case "-":temp=num1-num2;break;
					case "*":temp=num1*num2;break;
					case "/":temp=num1/num2;break;
					
				}
//				alert(op.value);
				document.getElementById("result").value=temp;
			}
		</script>
		
		
		
	</body>
</html>
